<template>
  <div class="flex gap-4 mb-4 m-[15px] mb-[20px]">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        最近使用时间
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu class="custom-dropdown-item">
          <el-dropdown-item command="1">最近一周</el-dropdown-item>
          <el-dropdown-item command="2">最近一个月</el-dropdown-item>
          <el-dropdown-item command="3">最近半年</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import dayjs from "dayjs";
const startTime = ref(null);
const endTime = ref(null);
// 获取当前时间
const currentDate = ref(new Date());
const emit = defineEmits(["getTime"]);
// 查询时间段
const handleCommand = (value) => {
  const date = new Date(currentDate.value);
  startTime.value = dayjs(date).format("YYYY-MM-DD HH:mm");
  if (value == "1") {
    date.setDate(date.getDate() - 7);
    endTime.value = dayjs(date).format("YYYY-MM-DD") + " 00:00";
  } else if (value == "2") {
    date.setMonth(date.getMonth() - 1);
    endTime.value = dayjs(date).format("YYYY-MM-DD") + " 00:00";
  } else {
    date.setMonth(date.getMonth() - 6);
    endTime.value = dayjs(date).format("YYYY-MM-DD") + " 00:00";
  }
  emit("getTime", startTime.value, endTime.value);
};
</script>

<style>
/* //下拉菜单样式 */
.custom-dropdown-item {
  color: #fff;
  background: #0c0c0e31;
}
/* //最外层边框样式 */
:global(.el-popper.is-light) {
  border: none;
}
/* //箭头三角样式 */
:global(.el-popper.is-light .el-popper__arrow::before) {
  background: #0c0c0e31;
  border: none;
}
/* 鼠标移入后展现的样式修改*/
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #101010;
  color: #fff;
}
</style>
